<template>
  <div class="app-container">
    <div class="con">
      <h2>基本信息</h2>
      <el-divider direction="horizontal"/>
      <el-form
        ref="elForm"
        :model="form"
        :rules="rules1"
        size="medium"
        label-width="180px"
        label-position="left">
        <h3>非招标基本信息</h3>
        <el-row
          type="flex"
          justify="space-between"
          align="top"
          :gutter="15"
          style="flex-wrap: wrap">
          <el-form-item label="项目名称" prop="gName" style="width: 45%">
            <el-input
              v-model="form.gName"
              clearable
              class="cInput"
              v-if="form.gRelease == 0"/>
            <el-input
              v-model="form.gName"
              clearable
              class="cInput"
              v-else
              readonly/>
          </el-form-item>
          <el-form-item label="项目编号" prop="gCode" style="width: 45%">
            <el-input v-model="form.gCode" clearable class="cInput" readonly/>
          </el-form-item>
          <el-form-item label="采购方式" prop="gTendertype" style="width: 45%">
            <el-input
              v-model="form.gTendertype"
              clearable
              class="cInput"
              readonly/>
          </el-form-item>
          <el-form-item label="公司" prop="eType" style="width: 45%">
            <el-input
              v-model="form.gCompany"
              clearable
              class="cInput"
              readonly/>
          </el-form-item>
          <el-form-item label="创建人" prop="createBy" style="width: 45%">
            <el-input
              v-model="form.createBy"
              clearable
              class="cInput"
              readonly
            />
          </el-form-item>
          <el-form-item label="创建部门" prop="createDept" style="width: 45%">
            <el-input
              v-model="form.createDept"
              clearable
              class="cInput"
              readonly
            />
          </el-form-item>
          <el-form-item label="公开/邀请" prop="gIsPublic" style="width: 45%">
            <el-input
              v-model="form.gIsPublic"
              clearable
              class="cInput"
              readonly/>
          </el-form-item>
          <el-form-item label="报价开始时间" prop="gTimeon" style="width: 45%">
            <el-date-picker
              v-model="form.gTimeon"
              type="datetime"
              placeholder="选择日期时间"
              v-if="form.gRelease == 1 || form.gRelease == 2"
              readonly/>
            <el-date-picker
              v-model="form.gTimeon"
              type="datetime"
              placeholder="选择日期时间"
              v-else/>
          </el-form-item>
          <el-form-item
            label="报价截止时间"
            prop="gDeadline"
            style="width: 45%">
            <el-date-picker
              v-model="form.gDeadline"
              type="datetime"
              placeholder="选择日期时间"
              v-if="form.gRelease == 1 || form.gRelease == 2"
              readonly/>
            <el-date-picker
              v-model="form.gDeadline"
              type="datetime"
              placeholder="选择日期时间"
              v-else/>
          </el-form-item>
        </el-row>
      </el-form>

      <h3>合同标的清单</h3>
      <div class="cl">
        <el-table
          :data="lTableData"
          :row-key="(row) => row.id"
          @selection-change="lHandleSelectionChange"
          border
          stripe
          :style="{ marginTop: '10px' }">
          <el-table-column label="序号" prop="id" width="60"/>
          <el-table-column label="产品名称" prop="inName" width="170">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inName" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" prop="tid" width="163">
            <template slot-scope="scope">
              <el-input v-model="scope.row.tid" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" prop="inModel">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inModel" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="inUnit" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inUnit" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="含税单价" prop="inVat" width="130">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inVat" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="inCount" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inCount" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="小计" prop="inSubtotal" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inSubtotal" readonly/>
            </template>
          </el-table-column>
        </el-table>
        <div :style="{ textAlign: 'right' }">
          <span :style="{ marginRight: '100px' }">总价:</span>
          <span :style="{ fontWeight: '700' }">{{
              lTotalSubtotal.toFixed(2)
            }}</span>
        </div>
      </div>

      <h3 v-if="!show">供应商报价信息</h3>
      <div class="cl" v-if="!show">
        <el-table
          :data="CsQuotation"
          :row-key="(row) => row.id"
          @selection-change="cHandleSelectionChange"
          border
          stripe
          :style="{ marginTop: '10px' }"
          ref="singleTable">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="供应商名称" prop="hName" width="300">
            <template slot-scope="scope">
              <el-input v-model="scope.row.hName" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="报价金额" prop="bjTotal">
            <template slot-scope="scope">
              <el-input v-model="scope.row.bjTotal.toFixed(2)" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="报价时间" prop="createtime">
            <template slot-scope="scope">
              <el-input v-model="scope.row.createtime" readonly/>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <h3>合同签署文件</h3>
      <el-form
        ref="elForm1"
        :model="form"
        size="medium"
        label-width="180px"
        label-position="left">
        <el-row
          type="flex"
          justify="space-between"
          align="top"
          :gutter="15"
          style="flex-wrap: wrap">
          <el-form-item
            label="附件上传"
            prop="CsPubAttachments"
            style="width: 45%">
            <el-upload
              class="upload-demo"
              action="#"
              :http-request="(file) => uploadDeviceFile(file, 'csPubAttachments')"
              :drag="true"
              :before-upload="uploadFileFun"
              :file-list="this.fileList2"
              :limit="3"
              :on-exceed="handleExceed"
              :on-remove="(file) => handleRemoveFile(file, this.fileList2)"
              :disabled="form.gRelease == 1">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip fontSize12 colorRed" slot="tip">
                上传文件格式为word或pdf或png或者txt，文件大小在10M以内
              </div>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <div style="margin-top: 20px">
      <el-button size="medium" @click="back1">返回</el-button>
      <el-button size="medium" type="primary" @click="addXy" v-if="show">
        提交
      </el-button>
      <el-button
        size="medium"
        type="primary"
        @click="faBu"
        v-if="form.gRelease == 1">
        完成
      </el-button>
    </div>
  </div>
</template>

<script>
import {getAttachmentsByAid, getItemsDevice, getPlan, getPro, getQuotation, upePro,} from "@/api/system/noTender";
import {listDevice} from "@/api/contract/addContract";
import {removeFile, uplodaBudgetFile} from "@/api/system/purchase"

export default {
  data() {
    return {
      xzCount: null,
      selectedRows: [],
      show: false,
      // 字典数据
      gTenderTypes: [],
      deptDict: [],
      aCode: null,
      //招标项目ID
      gid: this.$route.query.gid,
      //寻源方式
      XyOptions: [
        {
          value: 1,
          label: "邀请",
        },
        {
          value: 2,
          label: "公开",
        },
      ],
      //合同标的表格
      lTableData: [],
      total: 0,
      //产品信息参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tName: null,
        tUnit: null,
        taxRate: null,
        tModel: null,
        tPrice: null,
        tid: null,
      },
      //产品集合
      deviceList: [],
      //我方主体选择
      sub: "",
      cpDialog: false,
      lTotalSubtotal: 0,
      lTableColumns: [],
      lSelectedRows: [],
      cgValue: "",
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        hid: null,
        gName: null,
        gCode: null,
        gIsPublic: null,
        gSpawnTime: null,
        xyId: null,
        gid: null,
        gCompany: null,
        gTendertype: null,
        gTimeon: null,
        gDeadline: null,
        createBy: null,
        createDept: null,
        deptId: null,
        gRelease: null,
        gNotes: null,
      },
      // 表单校验
      rules1: {
        gTimeon: [
          {
            required: true,
            message: "请选择报价开始时间",
            trigger: "blur",
          },
        ],
        gDeadline: [
          {
            required: true,
            message: "请选择报价截止时间",
            trigger: "blur",
          },
        ],
      },
      selectRow: null,
      fileList2: [],
      //附件
      CsPubAttachments: {
        anSize: null,
        anUrl: null,
        anName: null,
      },
      aid: null,
      gfId: null,
      //报价集合
      CsQuotation: [],
      info: {
        gid: null,
        gTimeon: null,
        gDeadline: null,
        gRelease: null,
        csPubAttachments: {
          anId: null,
          aCode: null,
          anName: null,
          anUrl: null,
        },
      },
      chuan: [],
      show1: false,
      currentTime: null,
      show2: false,
      upFile: null,
      info1: {
        gid: null,
        gRelease: null,
        hid: null,
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
    };
  },
  mounted() {
    this.lCalculateTotalSubtotal();
    this.getList();
    this.getCurrentTime();
    this.myTimeDisplay = setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },
  created() {
    this.getDicts("cs_contract_pay").then((res) => {
      this.payTypes = res.data;
    });
    this.getDicts("cs_dept").then((res) => {
      this.deptDict = res.data;
    });
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    //删除文件
    handleRemoveFile(file, fileList) {
      removeFile(file.name).then((res) => {
        if (res.data == 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
        const index = fileList.findIndex((f) => f.name == file.name);
        // 从 fileList 中移除一个元素，从 index 位置开始
        fileList.splice(index, 1);
      });
    },
    //文件上传前的校验
    uploadFileFun(file) {
      var test = /(doc|docx|pdf|txt|png)$/.test(
        file.name.split(".").pop().toLowerCase()
      );
      if (!test) {
        this.$message.error("请上传正确的文档格式!");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }
    },
    uploadDeviceFile(file, str) {
      // 创建formdata实例
      let formData = new window.FormData();
      // 将获取的文件通过append方法加入实例中
      formData.append("file", file.file);
      //发送axios请求
      uplodaBudgetFile(formData)
        .then((res) => {
          // 拿到后端响应的文件名称反显到列表的form
          const fileInfo = {
            uid: file.file.uid,
            name: res.data.name,
            size: res.data.size,
            url: res.data.url,
          };
          if (str == "eImage") {
            this.fileList1.push(fileInfo);
          }
          if (str == "csPubAttachments") {
            this.fileList2.push(fileInfo);
          }
          if (str == "eDocuments") {
            this.fileList3.push(fileInfo);
          }
        })
        .catch((err) => {
          console.error("上传文件失败:", err);
        });
    },
    //时间
    getCurrentTime() {
      //获取当前时间并打印
      let _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf;
      this.currentTime = _this.gettime;
      if (this.currentTime >= this.form.gDeadline) {
        this.show2 = true;
        clearInterval(this.myTimeDisplay);
      } else {
        console.log(this.currentTime);
      }
    },
    //创建合同
    addXy() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          // 获取当前时间
          let currentTime = new Date();
          // 获取报价开始时间和截止时间
          let startTime = new Date(this.form.gTimeon);
          let deadline = new Date(this.form.gDeadline);
          // 验证时间是否大于当前时间
          if (startTime < currentTime || deadline < currentTime) {
            this.$message.error("报价开始时间和截止时间不能小于当前时间");
          } else {
            // 时间验证通过，继续验证时间间隔和文件上传
            let timeDiff = Math.abs(deadline.getTime() - startTime.getTime());
            // 计算相差的小时数
            let diffHours = timeDiff / (1000 * 3600);
            if (diffHours < 24) {
              this.$message.error("报价开始时间和截止时间的间隔不能小于24小时");
            } else {
              // 时间间隔验证通过，继续验证文件上传
              if (this.fileList2.length == 0) {
                this.$message.warning("请上传附件");
              } else {
                if (this.hasNewFiles()) {
                  console.log(1);
                  this.chuan.push(...this.fileList2);
                } else {
                  this.add();
                }
              }
            }
          }
        } else {
          this.$message.error("请填写完整信息");
          return false;
        }
      });
    },
    hasNewFiles() {
      // 检查 fileList2 中是否包含新文件
      for (let file of this.fileList2) {
        if (!file.url) {
          // 如果有文件没有 url 属性，表示是新文件
          return true;
        }
      }
      // 如果所有文件都有 url 属性，表示没有新文件
      return false;
    },
    //发布项目
    faBu() {
      if (this.CsQuotation.length == 0) {
        this.$message.warning("供应商未报价");
        return false;
      }
      if (this.xzCount !== 1) {
        this.$message.warning("请选择单个供应商！");
      } else {
        this.info1.gid = this.gid;
        this.info1.gRelease = 2;
        this.info1.hid = this.selectedRows[0].hid;
        console.log(this.CsQuotation[0].hid, "this.CsQuotation[0].hid");
        upePro(this.info1)
          .then((res) => {
            this.$message.success(res.msg);
            this.$router.push("index");
          })
          .catch((error) => {
            this.$message.error("发布失败");
          });
      }
    },
    //转换日期
    convertAndFormatDate(originalDate) {
      const dateObj = new Date(originalDate);
      const formattedDate = dateObj.toLocaleString("en-US", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      });
      return formattedDate.replace(
        /(\d+)\/(\d+)\/(\d+), (\d+):(\d+):(\d+) (AM|PM)/,
        function (match, month, day, year, hours, minutes, seconds, ampm) {
          const hours24 =
            ampm == "PM" && hours < 12 ? parseInt(hours, 10) + 12 : hours;
          return `${year}-${month}-${day} ${hours24}:${minutes}:${seconds}`;
        }
      );
    },
    add() {
      this.info.gTimeon = this.convertAndFormatDate(this.form.gTimeon);
      this.info.gDeadline = this.convertAndFormatDate(this.form.gDeadline);
      this.info.gRelease = 1;
      this.info.csPubAttachments.anUrl = this.chuan
        .map((item) => (item.response ? item.response.data.url : item.url))
        .join(",");
      this.info.csPubAttachments.anName = this.chuan
        .map((item) => (item.response ? item.response.data.name : item.name))
        .join(",");
      console.log(
        this.info.csPubAttachments.anUrl,
        "this.info.csPubAttachments.anUrl"
      );
      console.log(
        this.info.csPubAttachments.anName,
        "this.info.csPubAttachments.anName"
      );
      upePro(this.info)
        .then((res) => {
          this.$message.success("项目已提交");
          this.$router.push("index");
        })
        .catch((error) => {
          this.$message.error("提交异常");
        });
    },
    //查询采购计划信息
    getList() {
      getPro(this.gid).then((response) => {
        console.log(response.data, "采购计划信息");
        this.aid = response.data.xyId;
        this.info.csPubAttachments.aCode = response.data.xyId;
        this.info.gid = response.data.gid;
        this.form = response.data;
        if (response.data.gRelease == 0) {
          this.show = true;
        }
        if (response.data.gTendertype == 3) {
          this.form.gTendertype = "询价";
        } else if (response.data.gTendertype == 5) {
          this.form.gTendertype = "竞争性谈判";
        } else if (response.data.gTendertype == 4) {
          this.form.gTendertype = "委托";
        } else if (response.data.gTendertype == 6) {
          this.form.gTendertype = "单一来源";
        }
        if (response.data.gIsPublic == 1) {
          this.form.gIsPublic = "公开";
        } else {
          this.form.gIsPublic = "邀请";
        }
        this.form.gCompany = "成顺科技有限公司";
        this.gfId = this.form.gCode;
        this.getComPubAttachments();
        return Promise.all([
          getPlan(this.aid),
          getQuotation({gfId: this.gfId}),
        ]);
      }).then((res) => {
        console.log(res[0], "Plan", res[1], "Quo")
        this.form.createBy = res[0].data.createBy;
        this.form.deptId = res[0].data.deptId;
        this.form.createDept = this.deptDict.find(item => item.dictValue == this.form.deptId).dictLabel;
        this.aCode = res[0].data.aCode;
        res[1].rows.forEach((row) => {
          let quo = {
            hid: row.bjHid,
            hName: row.csSupplier.hName,
            bjSecond: row.bjSecond,
            bjTotal: row.bjTotal,
            createtime: row.createtime,
          };
          this.CsQuotation.push(quo);
        });
        //查询产品信息
        return getItemsDevice({aid: this.aCode});
      }).then((res) => {
        console.log(res, "res");
        res.rows.forEach((e, i) => {
          this.lTableData.push({
            id: i + 1,
            inName: e.csDevice.tName,
            inModel: e.csDevice.tModel,
            inVat: (e.csDevice.tPrice * 1.13).toFixed(2),
            inUnit: e.csDevice.tUnit,
            inSubtotal: (e.vCount * e.csDevice.tPrice * 1.13).toFixed(2),
            tid: e.tid,
            inCount: e.vCount,
          });
          this.lTotalSubtotal +=
            e.vCount * e.csDevice.tPrice * (1.13).toFixed(2);
        });
      });
    },
    //查询附件信息
    getComPubAttachments() {
      getAttachmentsByAid(this.aid).then((res) => {
        console.log(res, "res");
        if (!res.data) {
          return;
        }
        this.info.csPubAttachments.anId = res.data.anId;
        if (res.data.anName && res.data.anUrl) {
          const names = res.data.anName.split(",");
          const urls = res.data.anUrl.split(",");
          let fileList = [];
          for (let i = 0; i < names.length; i++) {
            fileList.push({
              name: names[i],
              url: urls[i],
            });
          }
          this.fileList2 = fileList;
          this.info.csPubAttachments.anName = res.data.anName;
          this.info.csPubAttachments.anUrl = res.data.anUrl;
        } else {
          this.fileList2 = [];
          this.info.csPubAttachments.anName = null;
          this.info.csPubAttachments.anUrl = null;
        }
      });
    },
    spCountBlur(row) {
      if (row.inVat == null) {
        row.inVat = 0.0;
      }
      row.inSubtotal = (row.inCount * row.inVat).toFixed(2);
      this.lCalculateTotalSubtotal();
    },
    //产品数量输入框的值改变时
    spCountChange(row) {
      if (row.inVat == null) {
        row.inVat = 0.0;
      }
      row.inSubtotal = (row.inCount * row.inVat).toFixed(2);
      this.lCalculateTotalSubtotal();
    },
    // 计算产品总价格方法
    lCalculateTotalSubtotal() {
      this.lTotalSubtotal = this.lTableData.reduce((total, row) => {
        let totalValue = row.inSubtotal ? parseFloat(row.inSubtotal) : 0;
        // 将每行的小计相加得到总价格
        let kk = total + totalValue;
        this.form.eAmount = kk.toFixed(2);
        this.qsFormData.gnPbamount = kk.toFixed(2);
        return kk;
      }, 0);
    },
    //查询产品信息
    selectBdList() {
      listDevice(this.queryParams).then((response) => {
        this.deviceList = response.rows;
        this.total = response.total;
      });
    },
    //查询供应商信息和业务经办人信息
    selectSupplier() {
      /* 业务经办人信息 */
      getOperator(this.hid).then((response) => {
        console.log(response);
        let k = response.data;
        this.qsFormData.gnPbcontact = k.ywName;
        this.qsFormData.gnPbcif = k.ywPhone;
      });
      /* 供应商信息 */
      getSupplier(this.hid).then((res) => {
        console.log("打印了供应商的信息");
        console.log(res);
        let k = res.data;
        this.qsFormData.gnPbname = k.hName;
        this.qsFormData.gnPbaddress = k.hAddress;
        this.qsFormData.gnPbbank = k.hBankAddress;
        this.qsFormData.gnPbaccount = k.hAccount;
        this.qsFormData.gnPbid = k.hid;
        this.form.hid = k.hid;
      });
    },
    //产品行点击事件
    handleRowClick(row) {
      // 在这里处理行点击事件
      this.selectRow.inName = row.tName;
      this.selectRow.tid = row.tid;
      this.selectRow.inModel = row.tModel;
      this.selectRow.inUnit = row.tUnit;
      this.selectRow.tid = row.tid;
      this.selectRow.inVat = (row.tPrice * 1.13).toFixed(2);
      this.selectRow.inCount = 1;
      this.selectRow.inSubtotal = (
        this.selectRow.inCount * this.selectRow.inVat
      ).toFixed(2);
      this.cpDialog = false;
      this.lCalculateTotalSubtotal();
    },
    //产品行点击事件
    handleRowClick1(row) {
      // 在这里处理行点击事件
      this.selectRow.hName = row.hName;
      this.selectRow.tid = row.tid;
      this.GysDialog = false;
    },
    //关闭产品名称对话框
    closeDialog1() {
      this.cpDialog = false;
    },
    //显示产品对话框
    openCp(row) {
      this.selectRow = row;
      this.cpDialog = true;
      this.selectBdList();
    },
    //返回
    back1() {
      this.$router.push("index");
    },
    //单选多选
    lHandleSelectionChange(selection) {
      this.lSelectedRows = selection;
    },
    //供应商单选多选
    cHandleSelectionChange(selection) {
      this.selectedRows = selection;
      this.xzCount = selection.length;
    },
  },
};
</script>

<style scoped>
.cl >>> .el-input__inner {
  border: none;
}

.cInput {
  width: 100%;
}

/*穿透隐藏el-input边框
.app-container>>>.el-input__inner {
}*/
.app-container {
  background-color: rgb(243, 243, 243);
}

.title {
  text-align: center;
}

.con {
  background-color: white;
  padding: 15px 80px 20px 80px;
  border: 1px solid #ececec;
}

h3 {
  font-weight: bold;
}

h2 {
  text-align: center;
  margin: 30px 0px;
}
</style>
